<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Affix 固钉</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
<style>
.app-affix{
	min-height: 1800px;
}
.affix-container {
	text-align: center;
	height:600px;
	border-radius: 4px;
	background: var(--el-color-primary-light-9);
}
</style>
</head>
<body>
<div id="app" class="app-affix">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">固钉默认固定在页面顶部。</p>
	<p class="desc">通过设置 offset 属性来改变吸顶距离，默认值为 0</p>
	<el-affix :offset="120">
		<el-button type="primary" style="margin-left: 50px;">Offset top 120px</el-button>
	</el-affix>
	
	<el-divider content-position="left">指定容器</el-divider><!-- =============================================================== -->
	<p class="desc">通过设置 target 属性，让固钉始终保持在容器内， 超过范围则隐藏</p>
	<p class="desc">请注意容器避免出现滚动条。</p>
	<div class="affix-container">
		<el-affix target=".affix-container" :offset="80">
			<el-button type="primary">Target container</el-button>
		</el-affix>
	</div>
	
	<el-divider content-position="left">固定位置</el-divider><!-- =============================================================== -->
	<p class="desc">Affix 组件提供 2 个固定的位置参数 top 和 bottom。</p>
	<p class="desc">通过设置 position 属性来改变固定位置，默认值为 top 。</p>
	<el-affix position="bottom" :offset="20">
		<el-button type="primary">Offset bottom 20px</el-button>
	</el-affix>
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			msg: 'Hello Vue!!'
		}
	},
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app");
</script>
</html>